<template>
	<view>
		<u-popup :show="status" mode="center" @close="zClose">
			<slot>
				<view class="popup-content tc">
					<view class="popup-conter__title  fs36 ">
						<view class="lh52 fw500">{{hintInfo.title}}</view>
						<view v-if="hintInfo.minTitle" class="fs28 lh40 mt20">{{hintInfo.minTitle }}</view>
					</view>
					<view class="mt40 fjc fs32 fw600" v-if="cancel || confirm">
						<view v-if="cancel" class="popup-content__btn left fjc" @click="status = false">取消</view>
						<view v-if="confirm" class="popup-content__btn right fjc" @click="sure">{{confirmTitle}}</view>
					</view>

				</view>
			</slot>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			hintInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			cancel: {
				type: Boolean,
				default: true
			},
			confirm: {
				type: Boolean,
				default: true
			},
			confirmTitle: {
				type: String,
				default: '去蓝莓园'
			}
		},
		data() {
			return {
				status: this.show
			}
		},
		watch: {
			show(newValue, oldValue) {
				this.status = this.show
			}
		},
		methods: {
			sure() {
				this.$emit('confirm')
			},
			zClose() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lh40 {
		line-height: 40rpx;
	}

	.lh52 {
		line-height: 52rpx;
	}

	.popup-content {
		color: #333;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 569rpx;
		padding: 60rpx 0 30rpx 0;
		border-radius: 16rpx;
		background: #fff;

		&__btn {
			width: 160rpx;
			height: 76rpx;
			border-radius: 38rpx;
		}

		&__btn.left {
			color: #5a5cd1;
			border: 2rpx solid #5a5cd1;
			margin-right: 66rpx;
		}

		&__btn.right {
			background: linear-gradient(270deg, #5a5cd1 0%, #8852E5 100%);
			box-shadow: inset 0 -6rpx 8rpx 0 rgba(255, 255, 255, 0.2);
			color: #fff;
		}
	}
</style>